import React from 'react'; // 其他{ useEffect, useMemo, useState }
import './FunctionDeclare.css';

// react18函数式声明组件，替代16中的class声明组件
export default function FunctionDeclare() {
    return (
        <section style={{border: 'solid', padding: '5px'}}>
            <div><span className='declare_title'>需要声明export</span>才能从其他组件import</div>
            <New1/>
            <Old1/>
            <div>import组件时要用大括号包住组件, 否则引入的是default组件</div>
        </section>
    );
}

// 注意，这里需要声明export才能从其他组件引入
export const New1 = () => {
    return (
        <span>写法1.const声明component</span>
    );
}

export function Old1() {
    return (
        <span>写法2.function声明component</span>
    );
}
